<template>
  <div class="page-teach-teacher">
    <!-- 筛选 -->
    <Row style="margin:15px 0px;">
      <Col span="6">
        时间区间：
        <DatePicker
          type="datetimerange"
          @on-change="handleChange"
          placeholder="选择时间区间"
          style="width: 280px"
        ></DatePicker>
      </Col>
      <Col span="3">
        班级分类：
        <Select v-model="query.classType" style="width:120px" @on-change="getClassNames" >
          <Option
            v-for="item in classTypes"
            :value="item._id"
            :key="item._id"
            >{{ item.name }}</Option
          >
        </Select>
      </Col>
      <Col span="3">
        班级名称：
        <Select v-model="query.className" style="width:120px">
          <Option
            v-for="item in classNames"
            :value="item._id"
            :key="item._id"
            >{{ item.name }}</Option
          >
        </Select>
      </Col>
      <Col span="4">
        <Input
          v-model="query.keywords"
          @on-search="load(1)"
          search
          enter-button
          placeholder="输入老师姓名、手机号码"
        />
      </Col>
      <Col span="2">
        <Button style="margin-left:15px;" @click="refresh()">清空</Button>
      </Col>
      <Col span="4">
        <Button type="primary" @click="download()">下载数据</Button>
      </Col>
    </Row>

    <!-- 表格 -->
    <Row>
      <Col span="24">
        <Table
          :no-data-text="noDataText"
          :loading="loading"
          :data="items"
          @on-sort-change="changeSort"
          :columns="columns"
        />
      </Col>
    </Row>
    <Row>
      <Col span="12">
        <div style="text-align:left;margin: 20px 10px;margin-bottom:120px;">
          <span>总课时费：123元</span>&nbsp;&nbsp;&nbsp;
          <span>课程数量：223节</span>&nbsp;&nbsp;&nbsp;
          <span>上课老师数：323人</span>
        </div>
      </Col>
      <Col span="12">
        <div style="text-align:right;margin: 20px 10px;margin-bottom:120px;">
          <Page
            show-total
            :page-size-opts="[10, 20, 30]"
            @on-page-size-change="changeLimit"
            show-sizer
            @on-change="load"
            :page-size="query.limit"
            :current.sync="query.page"
            :total="total"
            size="small"
          />
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { fetchTeachers } from '@/graphql/query/teacher/index'
import emptyDataPNG from '@/assets/icons/empty_data.png'
import dayjs from 'dayjs'
import { fetchClasses, fetchClassTypes } from '@/graphql/query/class/index'

export default {
  data () {
    return {
      classTypes: [],
      classNames: [],

      emptyDataPNG,
      columns: [
        {
          title: '序号',
          render: (h, params) => {
            const { limit, page } = this.query
            const startNumber = limit * (page - 1)
            const items = []
            items.push(h('span', {}, startNumber + params.index + 1))
            return h('span', items)
          },
          width: 80,
          align: 'center'
        },
        {
          title: '班级分类',
          width: 100,
          key: 'classType'
        },
        {
          title: '班级名称',
          width: 100,
          key: 'className'
        },
        {
          title: '上课人数',
          width: 100,
          key: 'num'
        },
        {
          title: '头像',
          width: 100,
          render (h, params) {
            let { avatar, sex } = params.row
            if (!avatar) {
              const teaMale =
                'https://duoduozhijiao.oss-cn-beijing.aliyuncs.com/nan.svg'
              const teaFemale =
                'https://duoduozhijiao.oss-cn-beijing.aliyuncs.com/nv.svg'
              avatar = sex === 'male' ? teaMale : teaFemale
            }
            return h('img', {
              attrs: {
                src: avatar
              },
              style: {
                width: '50px',
                height: '50px',
                margin: '10px'
              }
            })
          },
          align: 'center'
        },
        {
          title: '上课老师',
          width: 120,
          key: 'teacher'
        },
        {
          title: '老师电话',
          width: 120,
          key: 'teacherPhone'
        },
        {
          title: '签到状态',
          width: 100,
          render: (h, params) => {
            const { row } = params
            const type = row.signinStatus === 'no' ? '未签到' : '已签到'
            return h('span', type)
          },
          align: 'center',
          filters: [
            {
              label: '未签到',
              value: 'no'
            },
            {
              label: '已签到',
              value: 'yes'
            }
          ],
          filterMultiple: false,
          filterRemote: value => {
            this.query.type = value.length > 0 ? value[0] : ''
            this.load(1)
          }
        },
        {
          title: '课时费金额',
          width: 120,
          key: 'money',
          align: 'center',
          render (h, params) {
            const { row } = params
            return h('div', row.money)
          },
          sortable: 'custom',
          sortType: 'normal'
        },
        {
          title: '签到地址',
          width: 120,
          key: 'signinAddress'
        },
        {
          title: '上课教室',
          width: 120,
          key: 'classroom'
        },
        {
          title: '上课时间',
          width: 120,
          key: 'classTime',
          align: 'center',
          render (h, params) {
            const { created } = params.row
            if (!created) {
              return h('span', '-')
            }
            const date = h('div', dayjs(created).format('YYYY-MM-DD'))
            const time = h('div', dayjs(created).format('HH:mm:ss'))
            return h('div', [date, time])
          },
          sortable: 'custom',
          sortType: 'normal'
        },
        {
          title: '签到时间',
          width: 120,
          key: 'signinTime',
          align: 'center',
          render (h, params) {
            const { created } = params.row
            if (!created) {
              return h('span', '-')
            }
            const date = h('div', dayjs(created).format('YYYY-MM-DD'))
            const time = h('div', dayjs(created).format('HH:mm:ss'))
            return h('div', [date, time])
          },
          sortable: 'custom',
          sortType: 'normal'
        },
        {
          title: '备注',
          width: 120,
          key: 'remark'
        }
      ],
      items: [
        {
          classType: '12',
          className: 'name',
          num: '56',
          img: '',
          teacher: '赵老师',
          teacherPhone: '15687932212',
          signinStatus: 'yes',
          money: '99',
          signinAddress: '高新区xxxx',
          classroom: '一年级四班',
          classTime: '2020-07-21 14:20:00',
          signinTime: '2020-07-21 18:20:00',
          remark: 'xxxx'
        },
        {
          classType: '12',
          className: 'name',
          num: '56',
          img: '',
          teacher: '赵老师',
          teacherPhone: '15687932212',
          signinStatus: 'yes',
          money: '99',
          signinAddress: '高新区xxxx',
          classroom: '一年级四班',
          classTime: '2020-07-21 14:20:00',
          signinTime: '2020-07-21 18:20:00',
          remark: 'xxxx'
        }
      ],
      query: {
        startTime: '',
        endTime: '',
        classType: '',
        className: '',
        keywords: '',

        school: '',
        sort: '',
        limit: 20,
        page: 1
      },
      total: 0,
      loading: false
    }
  },
  mounted () {},
  methods: {
    handleChange (date) {
      this.query.startTime = date[0]
      this.query.endTime = date[1]
    },
    getClassTypes () {
      fetchClassTypes({ school: this.query.school })
        .then(res => {
          this.classTypes = res.data.class_types
        })
        .catch(() => (this.loading = false))
    },
    getClassNames () {
      fetchClasses({ school: this.query.school, classType: this.query.classType })
        .then(res => {
          this.classNames = res.data.classes
        })
        .catch(() => (this.loading = false))
    },
    download () {},
    refresh () {
      this.query.time = []
      this.query.classType = ''
      this.query.className = ''
      this.query.keywords = ''
      this.$nextTick(() => this.load(1))
    },
    changeSort (sort) {
      this.query.sort = sort.order
      this.load(1)
    },
    changeLimit (limit) {
      this.query.limit = limit
    },
    load (page) {
      const { school } = this.query
      if (this.loading || !school || school === '') {
        return false
      }
      this.loading = true
      const input = {
        input: this.query
      }
      fetchTeachers(input)
        .then(res => {
          const { teachers } = res.data
          const data = teachers

          this.query.page = data.current_page
          this.query.limit = data.limit
          this.items = data.data
          this.total = data.total
          this.$emit('on-change-total', this.total)
          this.loading = false
          document.querySelector('.content-wrapper').scrollTop = 1
        })
        .catch(() => (this.loading = false))
    }
  },
  computed: {
    ...mapGetters(['school']),
    noDataText () {
      const { emptyDataPNG } = this
      const style =
        'margin: 15px 0px;display: flex;justify-content: center;flex-direction: column;align-items: center;'
      return `<div style="${style}"><img style="width:150px;" src="${emptyDataPNG}" alt="" /><span>暂无数据</span></div>`
    }
  },
  watch: {
    school (value, oldValue) {
      this.query.school = value ? value._id : ''
      this.load(1)
      this.getClassTypes()
    }
  }
}
</script>
